<style scoped lang="scss">
@import "@/assets/css/index";
.fans {
  @include pageBottom();
  .fans-data-box {
    background-color: white;
    .data-title {
      font-size: 1.4rem;
      font-weight: bold;
    }
    .fans-info {
      display: flex;
      align-items: center;
      margin-top: 1.6rem;
      .box-item {
        flex: 1;
        // margin-top: 1.8rem;
        .cap-title {
          color: #565656;
          font-size: 1.23rem;
        }
        .num {
          margin-top: 0.8rem;
          font-size: 1.5rem;
          font-weight: bold;
        }
      }
    }
  }

  .list {
    padding-bottom: 1rem;
    .item {
      margin-top: 1rem;
      // margin-left: 1rem;
      // margin-right: 1rem;
      padding: 1rem;
      background-color: white;
      .flex1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.23rem;
        padding: .3rem 0;
        // font-weight: bold;
        // span {
        //   color: #F3F3F3;
        // }
      }
      .panle_two {
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        width: 100%;
        // height: 11rem;
        border-radius: 8px;
        background-color: white;
        color: #565656;
        .panle_item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          padding: .5rem 0;
          font-size: 1.2rem;
          .cap-title {
            margin-top: .5rem;
          }
        }
      }
      .flex2 {
        display: flex;
        .flex2-left {
          flex: 0 0 10rem;
          width: 10rem;
          height: 7.5rem;
          border-radius: 0.6rem;
          img {
            width: 100%;
            height: 100%;
            border-radius: 0.6rem;
            object-fit: cover;
          }
        }

        .flex2-right {
          .title {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 设置行数 */
            -webkit-box-orient: vertical;
            color: $color-subtitle;
            line-height: 1.2em;
          }
          .desc {
            span {
              color: #999;
            }
          }
        }
      }
      .flex3 {
        display: flex;
        justify-content: flex-end;
        .btn {
          margin-left: 1rem;
        }
      }
    }
  }
}
</style>
<template>
  <div class="fans padding-all-l">
    <!-- <div class="title title-m">活动粉丝总览</div> -->
    <div class="fans-data-box padding-all-l border-r-l">
      <div class="data-title">活动粉丝总览</div>
      <div class="fans-info">
        <div class="box-item">
          <div class="cap-title">访问次数</div>
          <div class="num color-red">{{ fansInfo.browse_num }}</div>
        </div>
        <div class="box-item">
          <div class="cap-title">参与量</div>
          <div class="num color-green">{{ fansInfo.join_num }}</div>
        </div>
      </div>
    </div>

    <div v-if="activityList.length != 0">
      <van-pull-refresh v-model="loadingRefresh" @refresh="refreshEvent">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          offset="100"
          @load="getActivityPage"
        >
          <div class="list">
            <div class="item" v-for="item in activityList" :key="item.id">

              <div class="flex1">
              <span>{{item.title}}</span>
              <div class="btn">
                <van-button
                  plain
                  :color="$store.getters.getMasterColor"
                  size="small"
                  @click="toApplyListView(item)"
                  >详情</van-button
                >
              </div>
            </div>
            <div class="panle_two">
              <div class="panle_item">
                <span>{{ item.browse_num || 0 }}</span>
                <span class="cap-title">浏览次数</span>
              </div>
              <div class="panle_item">
                <span>{{ item.unpaid || 0 }}</span>
                <span class="cap-title">未支付金额</span>
              </div>
              <div class="panle_item">
                <span>{{ item.refund || 0 }}</span>
                <span class="cap-title">退款金额</span>
              </div>
            </div>
            <div class="panle_two">
              <div class="panle_item">
                <span>{{ item.join_num || 0 }}</span>
                <span class="cap-title">参与次数</span>
              </div>
              <div class="panle_item">
                <span>{{ item.paysum || 0 }}</span>
                <span class="cap-title">支付次数</span>
              </div>
              <div class="panle_item">
                <span>{{ item.paid || 0 }}</span>
                <span class="cap-title">支付金额</span>
              </div>
             
            </div>
            </div>
          </div>

          <!-- <div class="list" >
          <div class="item" v-for="item in activityList" :key="item.id">
            <div class="flex1">
              <span>{{item.title}}</span>
              <span
                :style="{ color: $store.getters.getMasterColor }"
                v-if="item.status == 1"
                >倒计时{{ item.leaveDay }}天</span
              >
              <span style="color: #f5222d" v-else>已结束</span>
            </div>
            <div class="panle_two">
              <div class="panle_item">
                <span>{{ item.staff_invitation || 0 }}</span>
                <span class="cap-title">邀请人数</span>
              </div>
              <div class="panle_item">
                <span>{{ item.total_nums || 0 }}</span>
                <span class="cap-title">被助力总次数</span>
              </div>
              <div class="panle_item">
                <span>{{ item.staff_packet || 0 }}</span>
                <span class="cap-title">员工红包</span>
              </div>
            </div>
            <div class="panle_two">
              <div class="panle_item">
                <span>{{ item.staff_sign || 0 }}</span>
                <span class="cap-title">报名人数</span>
              </div>
              <div class="panle_item">
                <span>{{ item.staff_pay || 0 }}</span>
                <span class="cap-title">支付人数</span>
              </div>
              <div class="panle_item">
                <span>{{ item.staff_price || 0 }}</span>
                <span class="cap-title">支付金额</span>
              </div>
             
            </div>
          </div>
          <div v-if="activityList.length > 0">
            <div
              class="load-more color-l padding-all-m margB-l margT-l"
              v-if="finished == false"
              @click="getActivityPage"
            >
              加载更多
            </div>
          </div>
        </div> -->
        </van-list>
      </van-pull-refresh>
    </div>

    <!-- <div class="activity-list padding-all-l margT-l border-r-l">
      <div class="title "><span :style="{color:$store.getters.getMasterColor}">进行中</span>的活动</div>
      <div class="list" v-if="list&&list.length>0">
        <div class="item" v-for="item in list" :key="item.id" @click="toView(item)">
          <div class="content">
            <span class="title-s">{{item.title}}</span>
            <span class="time margT-m">创建时间 {{item.createtime}}</span>
          </div>
          <span class="icon"><van-icon name="arrow" color="#999"/></span>
        </div>
      </div>
      <div class="no-data padding-all-l color-s"  v-else>当前没有正在进行中的活动</div>
    </div> -->
    <div class="tabbar-height"></div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Icon, Toast, PullRefresh, Loading } from "vant";
import { myMixins } from "@/assets/js/mixins.js";
export default {
  name: "Fans",
  mixins: [myMixins],
  components: {
    [Icon.name]: Icon,
    [PullRefresh.name]: PullRefresh,
    [Loading.name]: Loading,
  },
  data() {
    return {
      openid: "",
      fansInfo: {},
      list: [],
      pageNo: 1,
      pageSize: 10,
      loadingRefresh: false,
      loading: false,
      finished: false,
      activityList: [],
      merchant_id: null,
    };
  },
  mounted() {
    const tabbar = JSON.parse(localStorage.getItem("tabbar"));
    document.title = tabbar[2].text;
    if (process.env.NODE_ENV == "production") {
      //线上环境
      this.openid = localStorage.getItem("OPENID") || "没获取到";
    } else {
      this.openid = this.$store.state.openid;
    }
    this.getActivityFans();
    this.list = this.$store.state.activityStatus1;
    this.configItemShare();
    this.getMerchantItem();
  },
  methods: {
    // 下拉刷新
    refreshEvent() {
      this.pageNo = 1;
      this.activityList = [];
      this.getActivityPage();
    },
    // 获取商户id
    getMerchantItem() {
      let params = { openid: this.openid };
      this.$request.getMerchantItem(params).then((res) => {
        console.log(res.data.id, "res");
        this.merchant_id = res.data.id;
        this.getActivityPage(res.data.id);
      });
    },
    getActivityPage(id) {
      const _this = this;
      let params = {
        // openid: _this.openid, // _this.$store.state.openid
        merchant_id: id || this.merchant_id,
        pageNo: _this.pageNo,
        pageSize: _this.pageSize,
      };
      const toast = Toast.loading({
        forbidClick: true,
        message: "加载中...",
      });
      this.loading = true;
      this.loadingRefresh = true;
      console.log(params, "params");
      _this.$request
        .getActivityPage(params)
        .then((res) => {
          let data = res.data.data;
          const list = data.map((item) => {
            const leaveTime =
              new Date(item.end_time).getTime() - new Date().getTime();
            const leaveDay = leaveTime / 1000 / 86400;
            item.leaveDay = Math.floor(leaveDay);
            return item;
          });
          console.log(list, "list");
          _this.activityList.push(...list);
          console.log(_this.activityList, "_this.activityList");
          _this.$store.commit("setActivityStatus1", data);
          if (_this.pageNo >= Math.ceil(res.data.totalCount / _this.pageSize)) {
            _this.finished = true;
          } else {
            _this.pageNo++;
          }
        })
        .finally(() => {
          console.log("finally");
          this.loadingRefresh = false;
          this.loading = false;
        });
    },
    toView(item) {
      const activityData = {
        id: item.id,
        title: item.title,
        createTime: item.createtime,
        browse_num: item.browse_num,
        join_num: item.join_num,
      };
      this.$store.commit("setActivityData", activityData);
      this.$router.push("/fans/activityFans/" + item.id);
    },
    getActivityFans() {
      let params = {
        openid: this.openid,
      };
      console.log("params", params);
      this.$request.getActivityFans(params).then((res) => {
        console.log("res", res);
        this.fansInfo = res.data;
      });
    },
    toApplyListView(item) {
      console.log(item.id);
      this.$router.push(`FansDetails?id=${item.id}`)
    }
  },
};
</script>
